<template>
  <div id="nav-header">
    <nav class="nav navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <p class="navbar-text">
          <a href="http://www.thinklev.com"><strong>青岛思考网络科技</strong></a>&nbsp;&nbsp;
        </p>
        <el-dropdown>
          <span class="el-dropdown-link">
            功能菜单<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><router-link to="/doc">Api 接口文档</router-link></el-dropdown-item>
            <el-dropdown-item divided><router-link to="/code">Api 图形验证码</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="/upload">Api 文件上传</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="/log">Api 访问日志</router-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p class="navbar-text"></p>
        <p class="navbar-text navbar-right">
          <span href="#" class="api-user-info">Api用户 : [ {{ userInfo.nickname }} : {{ userInfo.uid }} ]</span>
        </p>
      </div>
    </nav>
  </div>

</template>
<script>
  import bus from '../assets/js/bus.js'
  export default {
    created: function () {
      bus.$on('testLogin', this.testLogin)
      bus.$on('testLogout', this.testLogout)
    },
    data: () => ({
      userInfo: {
        uid: '-',
        nickname: '未登录'
      }
    }),
    methods: {
      // 当接口中的用户登录时
      testLogin: function (data) {
        if (data.status === 1) {
          this.userInfo = data.res.userInfo
        }
      },
      // 当接口中的用户退出时
      testLogout: function (data) {
        if (data.status === 1) {
          this.userInfo.uid = '^'
          this.userInfo.nickname = '已退出'
        }
      }
    }
  }
</script>
<style>
  .navbar-right{
    margin-right: 15px;
  }
  .api-user-info{
    font-size: 0.8em;
  }
  .el-dropdown{
    margin-top: 1em;
  }
  .el-dropdown-link{
    color: #CCC;
  }
</style>
